<template>
  <view>
    <uni-popup ref="popModel" type="center"
               :maskClick="false"
               border-radius="10px 10px 0 0">
      <view class="pop-box">
        <view class="main">
          <view class="title">订单日志</view>
          <view class="content" v-if="logList">
            <view class="item" v-for="(item,index) in logList" :key="index">
              <view class="item-con">
                <view class="l">操作记录</view>
                <view class="r">{{ item.change_message }}</view>
              </view>
              <view class="item-con">
                <view class="l">操作时间</view>
                <view class="r">{{ item.change_time }}</view>
              </view>
            </view>
          </view>
        </view>
        <view class="footer">
          <view class="btn cancel" @click="close">关闭</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import UniPopup from "../../../uni_modules/uni-popup/components/uni-popup/uni-popup.vue";
import {addConnectList, getConnectList, getLogList} from "../../../api/admin";

export default {
  components: {UniPopup},
  props:['nowItem'],
  data() {
    return {
      logList:[],
      recordsForm: { id: null, content: '', remark: '' }
    }
  },
  mounted(){
    this.$refs.popModel.open()
    this.getLogList()
  },
  methods: {
    close(){
      this.$emit('close','orderLogShow')
    },
    getLogList(){
      getLogList(this.nowItem.id).then(res=>{
        if(res.status===200){
          this.logList = res.data
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.pop-box{
  width: 90vw;
  max-height: 74vh;
  padding: 30rpx;
  border-radius: 28rpx;
  background: #fff;
  display: flex;
  flex-direction: column;
  .main{
    flex-direction: column;
    display: flex;
    flex: 1;
    overflow: hidden;
    .tip{
      color: #999;
      margin-top: 10rpx;
    }
  }
  .title{
    font-size: 30rpx;
    margin-bottom: 30rpx;
    font-weight: bold;
  }
  .content{
    flex: 1;
    overflow-y: auto;
    border-radius: 20rpx;
    .item{
      margin-bottom: 20rpx;
      border-bottom: 1rpx dashed #ddd;;
      padding: 10rpx;
      &:last-child{
        border-bottom: none;
      }
    }
    .item-con{
      display: flex;
      align-items: flex-start;
      margin-bottom: 30rpx;
      &:last-child{
        margin-bottom: 0 !important;
      }
      .l{
        white-space: nowrap;
        flex: 0 0 160rpx;
      }
      .r{
        flex:1;
        padding-right: 30rpx;
      }
    }
  }
  .add-box{
    margin-top: 20rpx;
    .item{
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;
      .l{
        white-space: nowrap;
        flex: 0 0 160rpx;
      }
      .r{
        flex:1;
      }
    }
  }
  .footer{
    display: flex;
    justify-content: center;
    margin-top: 30rpx;
    .btn{
      padding: 0 50rpx;
      line-height: 60rpx;
      border-radius: 28rpx;
    }
    .cancel{
      color: #333;
      border: 1rpx solid #CCCCCC;
      margin-right: 30rpx;
    }
    .confirm{
      color: #fff;
      background: #1497fa;
    }
  }
}
input{
  font-size: 28rpx;
  border: 1rpx solid #ddd;
  width: 100%;
  height: 60rpx;
  box-sizing: border-box;
}
textarea{
  box-sizing: border-box;
}
.edit-box{
  display: flex;
  justify-content: flex-end;
  .btn{
    width: 144rpx;
    height: 50rpx;
    border: 1rpx solid #CCCCCC;
    line-height: 50rpx;
    text-align: center;
    border-radius: 28rpx;
    font-size: 24rpx;
    color: #333333;
    transform: rotateZ(360deg);
  }
}
</style>